<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/bootstrapvalidator/css/bootstrapValidator.css"
          rel="stylesheet">

    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/js/bootstrapValidator.js"></script>

</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑报销申请单</h4>
    </div>

    <div class="panel-body">
        <form action="${pageContext.request.contextPath}/bx-informal/bxinformaledit" enctype="multipart/form-data" id="myform" method="post"
              class="form-horizontal" role="form">
            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="docNo" class="col-md-4 control-label">申请单号</label>
                    <div class="col-md-8">
                        <input type="hidden" id="oid" name="oid" value="${bxInformal.oid}">
                        <%--<input type="hidden" name="createDate" value="${bxInformal.createDate}">--%>
                        <input type="text" id="docNo" name="docNo" readonly="readonly"
                               class="form-control" placeholder="提交后自动生成" value="${bxInformal.docNo}">
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <label for="sex" class="col-md-4 control-label">申请人</label>
                    <div class="col-md-8">
                        <input type="hidden" id="proposer" name="proposer" value="${bxInformal.proposer}">
                        <div class="input-group">
                            <input type="text" id="empName" name="empName"
                                   readonly="readonly" class="form-control" placeholder="请选择申请人"
                                   value="${employee.empName}">
                            <span class="input-group-btn">
									<button class="btn btn-info" type="button" data-toggle="modal"
                                            data-target="#selectempModal">请选择</button>
								</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="flowid" class="col-md-4 control-label">报销审批流程</label>
                    <div class="col-md-8">
                        <select name="flowid" class="form-control" id="flowid">
                            <option value="">--请选择--</option>
                            <c:forEach items="${lcFlow}" var="flow">
                                <option value="${flow.oid}" <c:if test="${flow.oid eq bxInformal.flowid}">selected</c:if>>${flow.flowName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <label for="reason" class="col-md-2 control-label">申请事由</label>
                    <div class="col-md-10">
							<textarea class="form-control" id="reason" name="reason" rows="5"
                                      placeholder="请输入申请事由">${bxInformal.reason}</textarea>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <hr>
                </div>
            </div>

            <div id="details">
                <div class="col-md-12" style="display: none;" id="detailsTitle">
                    <div align="center">
                        <h4><label class="text-primary">报销明细</label></h4><BR> <BR>
                    </div>
                </div>
                <div id="detailsContainer">
                    <!-- 已有明细回显 -->
                    <c:forEach items="${details}" var="detail" varStatus="status">
                        <div class="detail-item">
                            <div class="col-md-12">
                                <div class="form-group col-md-5">
                                    <label class="col-md-4 control-label">报销类型</label>
                                    <div class="col-md-8">
                                        <select name="typeid" class="form-control">
                                            <option value="">--请选择--</option>
                                            <c:forEach items="${bxInformaltypes}" var="btype">
                                                <option value="${btype.oid}" <c:if test="${btype.oid eq detail.typeid}">selected</c:if>>${btype.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-5">
                                    <label class="col-md-4 control-label">申报金额</label>
                                    <div class="col-md-8">
                                        <input type="text" name="applyAmount" class="form-control" value="${detail.applyAmount}">
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <hr>
                            </div>
                        </div>
                    </c:forEach>
                </div>

            </div>

            <div id="accessarys">
                <div class="col-md-12" style="display: none;" id="accessarysTitle">
                    <div align="center">
                        <h4><label class="text-primary">报销附件</label></h4><BR><BR>
                    </div>
                </div>

            </div>




            <!-- ====== 报销附件标题 + 容器 ====== -->
            <div id="accessoryContainer">
                <!-- 已上传附件回显 -->
                <c:forEach items="${accessories}" var="acc" varStatus="status">
                    <div class="accessory-item">
                        <div class="col-md-12">
                            <div class="form-group col-md-5">
                                <label class="col-md-4 control-label">附件${status.index + 1}</label>
                                <div class="col-md-8">
                                    <!-- 图片预览 -->
                                    <c:if test="${acc.content.endsWith('.jpg') or acc.content.endsWith('.png')}">
                                        <img src="${pageContext.request.contextPath}/bx-informal/showImage?oid=${acc.oid}"
                                             style="width: 100px; height: auto; margin-right: 10px;" alt="附件图片">
                                    </c:if>
                                    <!-- 下载链接 -->
                                    <a href="${pageContext.request.contextPath}/bx-informal/downloadAccessory?oid=${acc.oid}">
                                            ${acc.description}（点击下载）
                                    </a>
                                    <input type="hidden" name="existingAccessoryOids" value="${acc.oid}">
                                </div>
                            </div>
                            <div class="form-group col-md-5">
                                <label class="col-md-4 control-label">描述</label>
                                <div class="col-md-8">
                                    <input type="text" name="existingDescriptions" class="form-control"
                                           value="${acc.description}" placeholder="请输入附件描述">
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <input type="button" onclick="deteleAccessarys(this)" class="btn btn-danger" value="删除此附件">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <hr>
                        </div>
                    </div>
                </c:forEach>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <div class="col-md-10  col-md-offset-2">
                        <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                        <button type="button" id="addDetails" class="btn btn-success">添加报销明细</button>
                        <button type="button" id="addAccessarys" class="btn btn-success">添加报销附件</button>
                        <button type="button" id="editdeptbtn" class="btn btn-success">提交信息</button>
                        <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>




<!-- 报销明细模板 -->
<div id="detailsdemo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="typeid" class="col-md-4 control-label">报销类型</label>
                <div class="col-md-8">
                    <select name="typeid" class="form-control" id="typeid">
                        <option value="">--请选择--</option>
                        <c:forEach items="${bxInformaltypes}" var="btype">
                            <option value="${btype.oid}"<%-- <c:if test="${flow.oid eq bxInformal.flowid}">selected</c:if>--%>>${btype.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="endDate" class="col-md-4 control-label">申报金额</label>
                <div class="col-md-8">
                    <input type="text" name="applyAmount" class="form-control"
                           placeholder="请输入申报金额">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>

<!-- 报销附件模板 -->
<div id="accessarysdemo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="file" class="col-md-4 control-label">附件(最大20M)</label>
                <div class="col-md-8">
                    <input type="hidden" name="contentfile">
                    <input type="file" id="content" name="content"></input>
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="endDate" class="col-md-4 control-label">附件描述</label>
                <div class="col-md-8">
                    <input type="text" name="description" class="form-control"
                           placeholder="请输入附件描述">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleAccessarys(this)" class="btn btn-danger" value="删除此附件">
            </div>
        </div>

        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="dept" class="col-md-4 control-label">所属部门</label>
                        <div class="col-md-5">
                            <select name="dept" class="form-control" id="dept">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="job" class="col-md-4 control-label">所属职位</label>
                        <div class="col-md-5">
                            <select name="job" class="form-control" id="job">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="emp" class="col-md-4 control-label">员工信息</label>
                        <div class="col-md-5">
                            <select name="emp" class="form-control" id="emp" size="10">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="sub" class="btn btn-primary">确认选择</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptUseSelect",function(listdept){
            var dept = $("#dept")[0];
            dept.options.length=1;
            for(var i=0;i<listdept.length;i++){
                var d = listdept[i];
                dept.options.add(new Option(d.deptName,d.oid));
            }
        });

        $("#dept").change(function(){
            $("#job")[0].options.length=1;
            $("#emp")[0].options.length=0;
            if(this.value==""){
                return;
            }
            $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptJobUseSelect",{deptid:this.value},function(listjob){
                var job = $("#job")[0];
                job.options.length=1;
                for(var i=0;i<listjob.length;i++){
                    var job1 = listjob[i];
                    job.options.add(new Option(job1.name,job1.oid));
                }
            });

            $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete",{deptid:$("#dept").val()},function(emps){
                var emp = $("#emp")[0];
                emp.options.length=0;
                for(var i=0;i<emps.length;i++){
                    var e = emps[i];
                    emp.options.add(new Option(e.empName,e.oid));
                }
            });
        });

        $("#job").change(function(){
            $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete2",{deptid:$("#dept").val(),jobid:this.value},function(emps){
                var emp = $("#emp")[0];
                emp.options.length=0;
                for(var i=0;i<emps.length;i++){
                    var e = emps[i];
                    emp.options.add(new Option(e.empName,e.oid));
                }
            });
        });

        $("#sub").click(function(){
            var eid=$("#emp").val();
            if(eid!=null){
                var empName=$("#emp option:selected").text();
                setempvalue(eid,empName);
                $('#selectempModal').modal('hide');
            }else{
                alert("请选择员工");
            }

        });

        $('#selectempModal').on('show.bs.modal',function() {
            $("#dept").val("");
            $("#job")[0].options.length=1;
            $("#emp")[0].options.length=0;
        });
    });
</script>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>

<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="alertMsgModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body" id="alertmsg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function setempvalue(eid, empName) {
        $("#proposer").val(eid);
        $("#empName").val(empName);
    }
</script>
</body>



<script type="text/javascript">
    function deteleDetails(o){
        $(o).parent().parent().parent().remove();
        if($("#details").children().length==1){
            $("#detailsTitle").hide();
        }
    }

    function deteleAccessarys(o){
        $(o).parent().parent().parent().remove();
        if($("#accessarys").children().length==1){
            $("#accessarysTitle").hide();
        }
    }

    $(document).ready(function() {

        <c:if test="${not empty details}">
        document.getElementById('detailsTitle').style.display = 'block';
        </c:if>

        <c:if test="${not empty accessories}">
        document.getElementById('accessarysTitle').style.display = 'block';
        </c:if>




        $("#addDetails").click(function(){
            $("#detailsTitle").show();
            $("#details").append($("#detailsdemo").html());
            $('#myform').bootstrapValidator('addField', 'typeid', {
                validators: {
                    notEmpty : {/*非空提示*/
                        message : '报销类型不能为空!'
                    }

                }
            });
            $('#myform').bootstrapValidator('addField', 'applyAmount', {
                validators: {
                    notEmpty : {/*非空提示*/
                        message : '报销金额不能为空!'
                    },
                    regexp: {
                        regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                        message: '报销金额格式不正确,金额必须大于0!'
                    }
                }
            });
        });

        $("#addAccessarys").click(function(){
            $("#accessarysTitle").show();
            $("#accessarys").append($("#accessarysdemo").html());

            $('#myform').bootstrapValidator('addField', 'content', {
                validators: {
                    notEmpty : {/*非空提示*/
                        message : '报销附件不能为空!'
                    }
                }
            });

            $('#myform').bootstrapValidator('addField', 'description', {
                validators: {
                    notEmpty : {/*非空提示*/
                        message : '附件描述不能为空!'
                    }
                }
            });
        });

        $("#myform").bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {/*input状态样式图片*/
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                flowid : {
                    validators : {
                        notEmpty : {/*非空提示*/
                            message : '请选择报销流程!'
                        }
                    }
                },
                description : {
                    validators: {
                        notEmpty : {/*非空提示*/
                            message : '附件描述不能为空!'
                        }
                    }
                },
                content : {
                    validators: {
                        notEmpty : {/*非空提示*/
                            message : '报销附件不能为空!'
                        }
                    }
                },
                applyAmount : {
                    validators: {
                        notEmpty : {/*非空提示*/
                            message : '报销金额不能为空!'
                        },
                        regexp: {
                            regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                            message: '报销金额格式不正确,金额必须大于0!'
                        }
                    }
                },
                typeid : {
                    validators: {
                        notEmpty : {/*非空提示*/
                            message : '报销类型不能为空!'
                        }
                    }
                }
            },
            submitHandler : function(validator,form, submitButton) {
                validator.defaultSubmit();
            }
        });


        $("#resetbtn").click(function() {
            $("#myform").data("bootstrapValidator").resetForm();
        });

        $("#editdeptbtn").click(function() {
            $('#myform').data("bootstrapValidator").validate();
            if($('#myform').data("bootstrapValidator").isValid()){
                var typeids = new Array();
                var s=true;
                $("select[name='typeid']").each(function(){
                    if($.inArray($(this).val(), typeids)!=-1){
                        $("#alertmsg").text("报销明细中报销类型不能重复!");
                        $('#alertMsgModal').modal('show');
                        s=false;
                        return;
                    }
                    typeids.push($(this).val());
                });
                if(s==true){
                    $('#myform')[0].submit();
                }
            }
        });

    });


</script>
</html>
